<template>
  <el-container class="home-container">
    <!-- 页面主体-->
    <el-container>
      <!-- 侧边栏-->
      <el-aside>
        <!-- 侧边栏菜单区域-->
        <div class="aside-info">
          <!-- <img src="../assets/img/logo.webp" alt="" class="image" />
          <p class="info-id">ID: 123456</p>
          <p class="info-name">莱趣网络</p> -->
          <!-- <img src="../assets/img/logo.png" alt="logo" class="image" /> -->
          <p class="info-name">公会后台</p>
        </div>
        <el-menu
          :default-active="active"
          class="el-menu-vertical-demo"
          text-color="#333"
          active-text-color="#fff"
          @select="select"
        >
          <el-menu-item
            v-for="item in menuList"
            :index="item.id"
            :key="item.id"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!--右侧内容主体-->
      <el-main>
        <!--头部区域-->
        <el-header style="height: 80px; z-index: 9">
          <el-dropdown trigger="click">
            <div class="header_set flex-center">
              <img :src="user.avatar ? user.avatar : icon" alt="头像" />
              <div class="box_name">
                <span class="name">{{
                  user.name ? user.name : "无效的用户名"
                }}</span>
                <span class="id">
                  ID:{{ user.ID ? user.ID : "无效的ID" }}
                </span>
              </div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button size="mini" type="text" @click="logOut">
                  <i class="el-icon-circle-close"></i> 退出登录
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="text" @click="setGuild">
                  <i class="el-icon-setting"></i> 公会设置
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <!--路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      icon: require("@/assets/img/avatar.png"),
      user: {
        avatar: "",
        name: "",
        ID: "",
      },
      active: "",
      menuList: [
        {
          id: "operation",
          name: "公会经营",
          path: "/laborunion-operation/operation",
          icon: "el-icon-menu",
        },
        {
          id: "report",
          name: "数据报表",
          path: "/data-report/report",
          icon: "el-icon-menu",
        },
        {
          id: "staff",
          name: "大神管理",
          path: "/staff-manage",
          icon: "el-icon-menu",
        },
        {
          id: "room",
          name: "房间管理",
          path: "/room-manage/roomList",
          icon: "el-icon-menu",
        },
        {
          id: "laborunionSet",
          name: "公会设置",
          path: "/laborunion-set/setCentre",
          icon: "el-icon-menu",
        },
      ],
    };
  },
  methods: {
    select(path) {
      switch (path) {
        case "operation":
          this.$router.push("/laborunion-operation/operation");
          break;
        case "report":
          this.$router.push("/data-report/report");
          break;
        case "staff":
          this.$router.push("/staff-manage");
          break;
        case "room":
          this.$router.push("/room-manage/roomList");
          break;
        case "laborunionSet":
          this.$router.push("/laborunion-set/setCentre");
          break;
      }
    },
    logOut() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
    setGuild() {
      this.$router.push("/laborunion-set/setCentre");
    },
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem("user"));
    this.user.avatar = user.img_url;
    this.user.name = user.name;
    this.user.ID = user.guild_id;

    switch (this.$route.path) {
      case "/laborunion-operation/operation":
        this.active = "operation";
        break;
      case "/data-report/report":
        this.active = "report";
        break;
      case "/staff-manage":
        this.active = "staff";
        break;
      case "/room-manage/roomList":
        this.active = "room";
        break;
      case "/laborunion-set/setCentre":
        this.active = "laborunionSet";
        break;
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        switch (this.$route.path) {
          case "/laborunion-operation/operation":
            this.active = "operation";
            break;
          case "/data-report/report":
            this.active = "report";
            break;
          case "/staff-manage":
            this.active = "staff";
            break;
          case "/room-manage/roomList":
            this.active = "room";
            break;
          case "/laborunion-set/setCentre":
            this.active = "laborunionSet";
            break;
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  background-color: #fff;
  margin: -10px -10px 0 -10px;
  position: sticky;
  top: -10px;
  border-bottom: 1px solid #626262;
  .header_set {
    cursor: pointer;
    .box_name {
      display: flex;
      flex-direction: column;
      margin: 0 10px;
    }
    .name {
      font-size: 18px;
    }
    .id {
      font-size: 14px;
    }
    img {
      vertical-align: middle;
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }
}

.out_login {
  text-align: center;
  display: flex;
  flex-direction: column;
  button {
    margin-left: 0;
  }
}

.el-aside {
  background-color: #fff;
  box-shadow: 1px 1px 5px 2px #9b9b9b;
  .el-menu {
    border-right: none;
  }
  .el-menu-item:hover,
  .el-menu-item:focus {
    background-color: #fff !important;
  }
  .el-menu-item.is-active {
    background-color: #8080ff !important;
    color: #fff;
  }
}

.el-main {
  background-color: #eaedf1;
  padding: 10px;
}
.aside-info {
  display: flex;
  font-weight: bolder;
  text-align: center;
  color: #fff;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #626262;
  .info-id {
    font-size: 22px;
    width: 300px;
    color: #666;
    font-weight: 350;
  }
  .info-name {
    font-size: 21px;
    margin-top: 20px;
    color: #333;
  }
  .image {
    width: 45px;
    height: 45px;
    margin: 0 10px;
  }
}
</style>